<template>
  <div class="page-wrap">
    <PageTopCover
      :moduleTitle="'小游戏'"
      :icon="'icon-yuleAPP'"
      :coverImg="getOnlineImgUrl('31')"
      :isMobile="isMobi"
      :modulDesc="'这里有很多好玩的小游戏，快来玩！'"
      :isArticle="false"></PageTopCover>
    <div class="page-container-wrap" :class="{ 'm-page-container-wrap': isMobi }">
      <div class="max-width-wrap">
        <div class="page-content-inner">
          <div class="game-list" v-if="state.list.length > 0">
            <div
              class="game-item pointer intersection-observer kbn-custom hover-shadow"
              :data-tip="'想玩玩 「' + item.title + '」 吗？'"
              @click="handleGame(item)"
              v-for="item in state.list"
              :key="item.id">
              <div class="game-item-img">
                <LImg class="game-img" :src="item.cover" :isUnPreview="true" alt="" />
              </div>
              <div class="game-item-title text">{{ item.title }}</div>
            </div>
          </div>
          <div class="no-content" v-else>
            <Empty :text="'暂无资源，期待您的分享~'" :loadingText="'资源正在拼命加载中...'" :loading="state.loading" />
          </div>

          <LoadingMore
            v-if="store.projectConfig.pageType == 'more'"
            :loading="state.loading"
            :hasMore="state.isMore"
            :length="state.list.length"
            @loadMore="handleLoadMore"></LoadingMore>
          <CustomPage v-else :page="state.page" @change="handlePageChange" :loading="state.loading" scorllTop="game-container-wrap"></CustomPage>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getArticleList } from '@/api/article';
import { useAppStore } from '@/store/app';
import { getOnlineImgUrl } from '@/utils/common';
import { live2dReloadElement, live2dShowMessage } from '@/utils/live2d';
import { onMounted, nextTick, reactive } from 'vue';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import useResize from '@/hooks/useResize';

interface GameItem {
  id: number;
  title: string;
  cover: string;
}

interface PageInfo {
  page: number;
  size: number;
  total: number;
}

interface State {
  list: GameItem[];
  loading: boolean;
  isMore: boolean;
  page: PageInfo;
}

const store = useAppStore();
const { isMobi } = useResize();
useIntersectionObserver();

const state = reactive<State>({
  list: [],
  loading: false,
  isMore: true,
  page: {
    page: 1,
    size: 9,
    total: 0
  }
});

const getListFn = (scorllTopCallback?: () => void): void => {
  state.loading = true;
  getArticleList({ ...state.page, game: 1 })
    .then(res => {
      if (res.code === 200) {
        // res.data.forEach(item => {
        //   item.title = item.title.includes('（') ? item.title.split('（')[0] : item.title;
        //   item.cover = import.meta.env.VITE_CURRENT_ENV === 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + item.cover : store.projectConfig.bsServerUrl + item.cover;
        // });
        // if (store.projectConfig.pageType === 'more') {
        //   state.list = [...state.list, ...res.data];
        // } else {
        //   state.list = res.data;
        // }
        // state.page.total = res.total;
        // state.isMore = state.list.length < res.total;
        // scorllTopCallback?.();
        // nextTick(() => {
        //   live2dReloadElement();
        // });
      }
    })
    .finally(() => {
      state.loading = false;
    });
};

const handleLoadMore = (): void => {
  state.loading = true;
  state.page.page++;
  getListFn();
};

const handlePageChange = (page: number, size: number, scorllTopCallback?: () => void): void => {
  state.page.page = page;
  state.page.size = size;
  getListFn(scorllTopCallback);
};

const handleGame = (row: GameItem): void => {
  const urlPrefix = store.projectConfig.blogUrl;
  window.open(`${urlPrefix}/preview?id=${row.id}`, '_blank');
};

onMounted(() => {
  getListFn();
  live2dShowMessage('欢迎来到 「我的小游戏」，快来玩玩吧！');
});
</script>

<style lang="scss" scoped>
.game-list {
  display: flex;
  flex-wrap: wrap;
  .game-item {
    border-radius: var(--border-radius-2);
    width: 280px;
    height: 200px;
    background-color: var(--bg-content-color);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 10px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1px solid #fff;
    overflow: hidden;
    &:hover {
      .game-img {
        transform: scale(1.1);
      }
    }
    .game-item-img {
      width: 220px;
      height: 220px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: all 0.6s ease-in-out;
      .game-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        transition: all 0.6s ease-in-out;
      }
    }
    .game-item-title {
      width: 100%;
      font-size: 18px;
      text-align: center;
      color: var(--text-color);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      bottom: 0px;
      left: 0;
      height: 30px;
      line-height: 30px;
      background-color: var(--bg-content-color);
    }
  }
}
.no-content {
  height: calc(100vh - 450px);
}

.m-page-container-wrap {
  .max-width-wrap {
    width: var(--content-max-width-m) !important;
    .game-item {
      width: 100% !important;
      height: 48vw !important;
      margin: 10px 0 !important;
      .game-item-title {
        bottom: 0 !important;
        font-size: 20px !important;
      }
    }

    .no-content {
      height: calc(100vh - 330px) !important;
    }
  }
}

.dark {
  .game-item {
    border-color: var(--border-color) !important;
  }
}
</style>
